<template>
  <div>
    <template v-if="type === 'text'">
      <Input
        :value="value"
        @input="handleInput"
        :placeholder="placeholderText"
        :style="styles"
        :disabled="disabled"
      ></Input>
    </template>
    <template v-if="type === 'textarea'">
      <Input
        type="textarea"
        :value="value"
        @input="handleInput"
        :placeholder="placeholderText"
        :style="styles"
        :disabled="disabled"
      ></Input>
    </template>
    <template v-else-if="type === 'select'">
      <BaseSelect
        :value="value"
        :style="styles"
        :disabled="disabled"
        :read-data="select.readData"
        :read-method="select.readMethod"
        :text-field="select.textField"
        :value-field="select.valueField"
        :transfer="transfer"
        :multiple="select.multiple"
        @on-change="handleInput"
        :placeholder="placeholderText"
        :option-type="optionType"
      />
    </template>
    <template v-else-if="type === 'number'">
      <InputNumber
        :value="handleNumberValue"
        :style="styles"
        :max="number.max"
        :min="number.min"
        :disabled="disabled"
        @on-change="handleInput"
      ></InputNumber>
    </template>
    <template v-else-if="type === 'percent'">
      <BaseInputNumber
        :value="handleNumberValue"
        :style="styles"
        :max="number.max || 100"
        :min="number.min || 0"
        :disabled="disabled"
        @on-change="handleInput"
        :formatter="value => `${value}%`"
        :parser="value => value.replace('%', '')"
      ></BaseInputNumber>
    </template>
    <template v-else-if="type === 'date'">
      <DatePicker
        :value="value"
        :disabled="disabled"
        format="yyyy-MM-dd"
        type="date"
        :placeholder="placeholderText"
        :transfer="transfer"
        :editable="false"
        @on-change="handleInput"
        :style="styles"
      ></DatePicker>
    </template>
    <template v-else-if="type === 'daterange'">
      <DatePicker
        :value="daterangeValue()"
        type="daterange"
        :disabled="disabled"
        split-panels
        :placeholder="placeholderText"
        :style="styles"
        :transfer="transfer"
        :editable="false"
        format="yyyy-MM-dd"
        @on-change="handleDaterangeInput"
      ></DatePicker>
    </template>
    <template v-else-if="type === 'checkbox'">
      <Checkbox
        :value="handleCheckboxValue"
        :disabled="disabled"
        @on-change="handleInput"
      ></Checkbox>
    </template>
    <template v-else-if="type === 'checkboxMore'">
      <CheckboxGroup
        v-model="checkboxMoreValue"
        @on-change="checkboxMoreChange"
      >
        <Checkbox
          :label="item.id"
          v-for="item in correctRadioOrCheckboxListList"
          :key="item.label"
          >{{ item.label }}</Checkbox
        >
      </CheckboxGroup>
    </template>
    <template v-else-if="type === 'radio'">
      <RadioGroup v-model="radioValue" @on-change="changeRadio">
        <Radio
          :label="item.id"
          v-for="item in correctRadioOrCheckboxListList"
          :key="item.label"
          :disabled="disabled"
        >
          <span>{{ item.label }}</span>
        </Radio>
      </RadioGroup>
    </template>
    <template v-else-if="type === 'popup'">
      <Input
        :value="value"
        @input="handleInput"
        :placeholder="placeholderText"
        :style="styles"
        :disabled="disabled"
        :readonly="true"
        @click.native="popupClick"
      >
        <Button slot="append" icon="ios-search" @click="popupClick"></Button>
      </Input>
    </template>
    <!-- 三级联动分类 -->
    <template v-else-if="type === 'cascader'">
      <!-- {{value}} -->
      <!-- <Cascade @onChange="casValue" @input="handleInput" :placeholder="placeholderText"></Cascade> -->
      <Cascader
        :data="cascaderData"
        v-model="cascaderValue"
        change-on-select
        @on-change="cascaderChange"
        :disabled="disabled"
        :not-found-text="notFoundText"
      ></Cascader>
      <!-- <Cascade
        :data="value"
        @on-change="casValue"
        @input="handleInput"
        :placeholder="placeholderText"
      ></Cascade> -->
    </template>
  </div>
</template>

<script>
import _ from 'lodash'
import { oneOf } from '@/libs/jss/tools.js'
import dayjs from 'dayjs'
import BaseSelect from '../base-select'
import BaseInputNumber from './base-input-number'
// import Cascade from '../classifyCascade'
import Cascade from '../MyCascade/MyCascade'
import { deepCopy } from '../../libs/jss/tools'
export default {
  name: 'BaseFormItem',
  data () {
    return {
      categoryTreeList: [],
      productId: ''
    }
  },
  components: {
    BaseSelect,
    BaseInputNumber,
    Cascade,
  },
  props: {
    type: {
      validator (value) {
        return oneOf(value, [
          'text',
          'select',
          'cascader',
          'date',
          'daterange',
          'number',
          'checkbox',
          'textarea',
          'percent',
          'popup',
          'radio',
        ])
      }
    },
    textField: {
      type: String,
      default: 'label'
    },
    valueField: {
      type: String,
      default: 'id'
    },
    value: {
      type: [String, Number, Array, Object, Boolean],
      // default: ''
    },
    width: {
      type: [Number, String]
    },
    placeholder: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    transfer: {
      type: Boolean,
      default: false
    },
    daterange: {
      type: Object
    },
    select: {
      type: Object
    },
    number: {
      type: Object,
      default () {
        return {}
      }
    },
    radioOrCheckboxListList: {
      type: Array,
      default () {
        return []
      }
    },
    cascaderData: {
      type: Array,
      default () {
        return []
      }
    },
    optionType: {
      type: String,
      default: 'string'
    },
    notFoundText: {
      type: String,
      default: '无匹配数据'
    },
  },
  methods: {
    // 级联组件的值
    casValue (val) {
      if (val.length > 0) {
        this.productId = val[val.length - 1].id
        this.$emit('input', this.productId)
      } else {
        this.productId = ''
        this.$emit('input', this.productId)
      }
    },
    handleInput (event) {
      if (this.type === 'date') {
        this.$emit('input', event ? dayjs(event).format('YYYY-MM-DD') : '')
      } else {
        this.$emit('input', event)
      }
    },
    handleDaterangeInput (event) {
      this.$emit(
        'update:startDate',
        event[0] ? dayjs(event[0]).format('YYYY-MM-DD') : ''
      )
      this.$emit(
        'update:endDate',
        event[1] ? dayjs(event[1]).format('YYYY-MM-DD') : ''
      )
    },
    daterangeValue () {
      if (!this.daterange) {
        return []
      }
      return Array.of(
        this.daterange.date !== undefined
          ? (this.value[this.daterange.startKey] = this.daterange.date[0])
          : this.value[this.daterange.startKey],
        this.daterange.date !== undefined
          ? (this.value[this.daterange.endKey] = this.daterange.date[1])
          : this.value[this.daterange.endKey]
      )
    },
    deptreeList(val){
      this.$emit('input',val)
    },
    popupClick () {
      this.$emit('popup')
    },
    changeRadio (data) {
      this.$emit('input', data)
    },
    checkboxMoreChange (data) {
      this.$emit('input', data)
    },
    cascaderChange (data) {
      this.$emit('input', data)
    }
  },
  computed: {
    styles () {
      let width = this.width || 100
      return {
        width: width <= 100 ? `${width}%` : `${width}px`
      }
    },
    placeholderText () {
      if (this.disabled === true) {
        return ''
      }
      if (this.placeholder) {
        return this.placeholder
      }
      if (this.type !== 'text' && this.type !== 'textarea') {
        return '点击选择'
      }
      return '点击输入'
    },
    handleNumberValue () {
      if (_.isNumber(this.value)) {
        return this.value
      } else {
        return 0
      }
    },
    handleCheckboxValue () {
      if (_.isNil(this.value)) {
        return false
      } else if (this.value === 'true') {
        return true
      } else if (this.value === 'false') {
        return false
      } else {
        return this.value
      }
    },
    correctRadioOrCheckboxListList () {
      let copyRadioOrCheckboxListList = deepCopy(this.radioOrCheckboxListList)
      copyRadioOrCheckboxListList.forEach(item => {
        // item['id'] = item[this.valueField]
        item['label'] = item[this.textField]
      })
      return copyRadioOrCheckboxListList
    },
    radioValue: {
      get () {
        return this.value
      },
      set () {
        return this.value
      }
    },
    checkboxMoreValue: {
      get () {
        return this.value
      },
      set () {
        return this.value
      }
    },
    // value
    cascaderValue: {
      get () {
        return this.value
      },
      set () {
        return this.value
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ivu-date-picker-rel {
  z-index: 0;
}
</style>
